const productList = document.getElementById("productList");
const barrageContainer = document.getElementById("barrageContainer");

const mockProducts = [
  {
    title: "数码3C｜阵容超豪华的数码派对",
    price: "9.90",
    sales: "95684",
    thumb: "./static/img/index_1.jpg",
    awardList: Array(8).fill(0).map((_, i) => `https://picsum.photos/seed/a${i}/40/40`)
  },
  {
    title: "超值特惠：严选优品",
    price: "7.99",
    sales: "7",
    thumb: "./static/img/index_2.jpg",
    awardList: Array(4).fill(0).map((_, i) => `https://picsum.photos/seed/b${i}/40/40`)
  },
  {
    title: "超值特惠：严选优品｜随机得一件",
    price: "7.99",
    sales: "7",
    thumb: "./static/img/index_3.jpg",
    awardList: Array(2).fill(0).map((_, i) => `https://picsum.photos/seed/b${i}/40/40`)
  },
  {
    title: "苹果14 PRO来袭｜随机得一件 不支持退换",
    price: "19.98",
    sales: "63654",
    thumb: "./static/img/index_1.jpg",
    awardList: Array(3).fill(0).map((_, i) => `https://picsum.photos/seed/c${i}/40/40`)
  }, {
    title: "超值特惠：严选优品",
    price: "7.99",
    sales: "7",
    thumb: "./static/img/index_2.jpg",
    awardList: Array(4).fill(0).map((_, i) => `https://picsum.photos/seed/b${i}/40/40`)
  },
  {
    title: "超值特惠：严选优品｜随机得一件",
    price: "7.99",
    sales: "7",
   thumb: "./static/img/index_3.jpg",
    awardList: Array(5).fill(0).map((_, i) => `https://picsum.photos/seed/b${i}/40/40`)
  },
  {
    title: "苹果14 PRO来袭｜随机得一件 不支持退换",
    price: "19.98",
    sales: "63654",
    thumb: "./static/img/index_1.jpg",
    awardList: Array(3).fill(0).map((_, i) => `https://picsum.photos/seed/c${i}/40/40`)
  }
];

const mockLogs = [
  "恭喜用户A抽中Apple Watch！",
  "用户B开启数码盲盒，抽中小米耳机！",
  "用户C中奖：Switch掌机",
  "用户D获得神秘手办一份！"
];

// function renderList() {
//   productList.innerHTML = mockProducts.map(p => `
//       <div class="list-item" onclick="goTo('details.html?title=${p.title}')"> 
//         <div class="thumb">
//           <svg
//             class="tag"
//             viewBox="0 0 1024 1024"
//             version="1.1"
//             xmlns="http://www.w3.org/2000/svg"
//             width="30"
//             height="30"
//           >
//             <defs>
//               <linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%">
//                 <stop offset="0%" stop-color="#54b1ed" />
//                 <stop offset="100%" stop-color="#68dff5" />
//               </linearGradient>
//             </defs>

//             <path
//               d="M828.5 68.1H200.9c-57.8 0-104.6 44.4-104.6 99.3v694c0 13.7 2.9 26.8 8.3 38.7 22.3 49.9 83.9 68.2 130.5 39.7l244.7-149.6c28.1-17.2 63.5-16.6 91 1.4l221.1 145c59.3 38.9 139.4-1.8 141.3-72.7V167.3c-0.1-54.8-46.9-99.2-104.7-99.2z"
//               fill="url(#gradBlue)"
//               p-id="7539"
//             ></path>

//             <path
//               d="M365.9 552.7h-32.7v-114H205.1v114.1h-32.7V299.6h32.7v110h128.1v-110h32.7v253.1zM414.9 429.2c0-40.9 11.1-73.4 33.2-97.6s52.1-36.3 89.9-36.3c35.2 0 63.5 11.8 85 35.5 21.5 23.6 32.2 54.4 32.2 92.3 0 41.1-11 73.7-33 97.7-22 24.1-51.4 36.1-88.3 36.1-36 0-64.8-11.8-86.5-35.5-21.6-23.5-32.5-54.3-32.5-92.2z m34.4-2.6c0 30.6 7.8 55.1 23.5 73.7 15.6 18.4 36 27.7 61.2 27.7 27 0 48.2-8.8 63.7-26.6 15.4-17.7 23.1-42.4 23.1-74.3 0-32.7-7.5-57.9-22.6-75.7-15.1-17.8-35.8-26.6-62-26.6-25.8 0-46.7 9.4-62.8 28.1-16.1 18.7-24.1 43.3-24.1 73.7zM857 328.7h-73v224.1h-32.9V328.7h-72.7v-29.1H857v29.1z"
//               fill="#FFF"
//               stroke="#FFF"
//               stroke-width="20"
//               p-id="7540"
//             ></path>
//           </svg>

//           <img  src="${p.thumb}" />
//         </div>
//         <div class="item-info">
//           <div class="title">${p.title}</div>
//           <div class="price-num">
//             <div class="price">¥${p.price}</div>
//             <div class="sales">${p.sales}人开启</div>
//           </div>
//           <div class="marquee">

//             ${p.awardList.map(src => `<img class="marquee-item" src="${src}" />`).join('')}
//           </div>
//         </div>
//       </div>
//   `).join('');
// }
function renderList() {
  productList.innerHTML = mockProducts.map(p => `
    <div class="banner-item" onclick="goTo('details.html?title=${p.title}')">
      <div class="banner-img-wrapper">
        <!-- 左上角图标 -->
        <div class="corner-icon">
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="30"
            height="30"
          >
            <defs>
              <linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#54b1ed" />
                <stop offset="100%" stop-color="#68dff5" />
              </linearGradient>
            </defs>
            <path
              d="M828.5 68.1H200.9c-57.8 0-104.6 44.4-104.6 99.3v694c0 13.7 2.9 26.8 8.3 38.7 22.3 49.9 83.9 68.2 130.5 39.7l244.7-149.6c28.1-17.2 63.5-16.6 91 1.4l221.1 145c59.3 38.9 139.4-1.8 141.3-72.7V167.3c-0.1-54.8-46.9-99.2-104.7-99.2z"
              fill="url(#gradBlue)"
            ></path>
            <path
              d="M365.9 552.7h-32.7v-114H205.1v114.1h-32.7V299.6h32.7v110h128.1v-110h32.7v253.1zM414.9 429.2c0-40.9 11.1-73.4 33.2-97.6s52.1-36.3 89.9-36.3c35.2 0 63.5 11.8 85 35.5 21.5 23.6 32.2 54.4 32.2 92.3 0 41.1-11 73.7-33 97.7-22 24.1-51.4 36.1-88.3 36.1-36 0-64.8-11.8-86.5-35.5-21.6-23.5-32.5-54.3-32.5-92.2z m34.4-2.6c0 30.6 7.8 55.1 23.5 73.7 15.6 18.4 36 27.7 61.2 27.7 27 0 48.2-8.8 63.7-26.6 15.4-17.7 23.1-42.4 23.1-74.3 0-32.7-7.5-57.9-22.6-75.7-15.1-17.8-35.8-26.6-62-26.6-25.8 0-46.7 9.4-62.8 28.1-16.1 18.7-24.1 43.3-24.1 73.7zM857 328.7h-73v224.1h-32.9V328.7h-72.7v-29.1H857v29.1z"
              fill="#FFF"
              stroke="#FFF"
              stroke-width="20"
            ></path>
          </svg>
        </div>

        <!-- 主图外层容器 -->
        <div class="img-container">
          <img class="banner-img" src="${p.thumb}" alt="${p.title}" />
          <div class="img-bottom-text">${p.title}</div>
        </div>

        <!-- 图片右下角描述 -->
        
        <div class="bottom-text">${p.title}</div>
      </div>
    </div>
  `).join('');
}




function goTo(path) {
  // alert("跳转至: " + path);
  window.location.href = path;
}
function showRules() {
  alert("活动规则弹窗");
}

function initNoticeBarScroller(containerSelector, textSelector, speedPerSecond = 50, pauseDuration = 2000) {
  const container = document.querySelector(containerSelector);
  const text = document.querySelector(textSelector);

  if (!container || !text) {
    console.warn('NoticeBarScroller: Invalid selectors provided.');
    return;
  }

  let containerWidth, textWidth;
  let posX = 0;
  let lastTime = null;
  let isPaused = false;

  function init() {
    containerWidth = container.offsetWidth;
    textWidth = text.offsetWidth;
    posX = containerWidth; // 当前文本的 X 坐标位置
    text.style.transform = `translateX(${posX}px)`;
    lastTime = null;
    isPaused = false;
    console.log('NoticeBarScroller: Initialized.', container.offsetWidth, text.offsetWidth);
    requestAnimationFrame(scroll);
  }

  function scroll(timestamp) {
    if (isPaused) return;

    if (!lastTime) lastTime = timestamp;
    const delta = timestamp - lastTime;
    lastTime = timestamp;

    const speedPerMs = speedPerSecond / 1000; // px/ms
    posX -= speedPerMs * delta;

    text.style.transform = `translateX(${posX}px)`;
    if (textWidth + posX <= 0) {
      isPaused = true;
      setTimeout(() => {
        posX = containerWidth;
        text.style.transform = `translateX(${posX}px)`;
        lastTime = null;
        isPaused = false;
        requestAnimationFrame(scroll);
      }, pauseDuration);
    } else {
      requestAnimationFrame(scroll);
    }
  }

  window.addEventListener('resize', init);
  init();
}

function initMarquee(marqueeSelector, speed = 50, gap = 3) {
  const marquees = document.querySelectorAll(marqueeSelector);
  if (!marquees.length) {
    console.warn('Marquee: No marquee elements found.');
    return;
  }
  function totalWidth(marquee, gap) {
    const imgList = marquee.querySelectorAll('img');
    const imgCount = imgList.length;

    let totalWidth = 0;

    imgList.forEach(img => {
      const style = getComputedStyle(img);
      const marginRight = parseInt(style.marginRight) || 0;
      totalWidth += img.offsetWidth + marginRight;
    });

    return totalWidth + (imgCount - 1) * gap;
  }

  marquees.forEach(marquee => {
    const containerWidth = marquee.offsetWidth;
    let totalImagesWidth = totalWidth(marquee, gap);

    // (可注释)
    if (totalImagesWidth <= containerWidth * 2 / 5) {
      return;
    }

    // 复制内容，实现无缝衔接
    const content = marquee.innerHTML;
    marquee.innerHTML += content;

    // 初始位移
    let posX = 0;

    // 计算单组内容宽度
    // 注意这里需要计算所有图片宽度和间距
    // 也可以用scrollWidth/2
    const scrollWidth = marquee.scrollWidth / 2;

    function step() {
      posX -= speed / 60; // 每帧移动距离，speed px/s, 假设60fps

      if (-posX >= scrollWidth) {
        // 滚动到一半宽度，重置位移
        posX = 0;
      }

      marquee.style.transform = `translateX(${posX}px)`;

      requestAnimationFrame(step);
    }

    step();
  });
}



document.addEventListener("DOMContentLoaded", () => {

  renderList();
  initMarquee('.marquee', 10);
  initNoticeBarScroller('.notice-bar-content', '#noticeBar', 140, 50);
});


